<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的生命周期函数</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="count">{{count}}</div>
		</div>
	</body>
</html>
<script>
	// vue的生命周期函数：整个vue生命周期中某个时刻要执行的函数
	const {createApp} = Vue;
	// 创建App实例
	const app = createApp({
		data(){
			return {
				// 所有的数据
				count:20
			}
		},
		// 所有的数据操作方法
		methods:{
			sum(){
				
			},
			update(){
				
			}
		},
		// template:`<div class="count">{{count}}</div>`,
		// 创建实例之前要执行的函数
		beforeCreate() {
			console.log('beforeCreate被执行了');
		},
		// 创建实例之后要执行的函数
		created() {
			console.log('created被执行了');
		},
		// 挂载模板之前要执行的函数
		beforeMount() {
			// console.log(document.querySelector('.count').textContent);
			console.log('beforeMount被执行了');
		},
		// 挂载模板之后要执行的函数
		mounted() {
			console.log(document.querySelector('.count').textContent);
			console.log('mounted被执行了');
		},
		// 数据被修改之前要执行的函数
		beforeUpdate() {
			console.log('beforeUpdate被执行了');
		},
		// 数据被修改之后要执行的函数
		updated() {
			console.log('updated被执行了');
		},
		// 销毁（卸载）实例之前要执行的函数
		beforeUnmount() {
			console.log('beforeUnmount被执行了');
		},
		// 销毁(卸载)实例之后要执行的函数
		unmounted() {
			console.log('unmounted被执行了');
		}
	});
	// 挂载
	const vm = app.mount("#app")
</script>
